<template>
    <div class="main-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-condition"></i></span>
            </div>
            <div style="height: 40px;">
                <el-form :inline="true" :model="formQuery">
                    <el-form-item label="名称">
                        <el-input size="small" v-model="formQuery.instanceName" placeholder="流程"></el-input>
                    </el-form-item>
                    <el-form-item label="发起人">
                        <el-input size="small" v-model="formQuery.currUserName" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onSubmit(null,null)" size="small">查询
                        </el-button>
                        <el-button type="info" icon="el-icon-refresh-left" @click="onReset" size="small">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="table-list">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-table-list" style="font-weight: 600;margin-top: 8px;"></i></span>
            </div>
            <div>
                <el-table :data="tableData" height="calc(100vh - 400px)" border style="width: 100%"
                          empty-text="暂无数据" :loading="loading">
                    <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                    <el-table-column align="center" prop="name" label="流程名称"></el-table-column>
                    <el-table-column align="center" prop="startUserName" label="发起人"></el-table-column>
                    <el-table-column align="center" prop="startTime" label="发起时间" width="200"
                                     :formatter="formatterDate"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleViewFlowImg(scope.row.id)" style="font-size: 12px">
                                流程图
                            </el-button>
                            <el-button @click="handleClick(scope.row)" type="text" style="font-size: 12px">
                                审批历史
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="text-align: right;margin-top: 8px">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="pageNum"
                               :page-sizes="[10, 20, 50, 100]"
                               :page-size="pageSize"
                               layout="prev, pager, next, sizes,total"
                               :total="total">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="流程实例执行图" :visible.sync="imgDialogVisible" width="50%">
            <workflow-instance-img :flow-img-url="this.flowImgUrl"/>
        </el-dialog>
        <el-dialog title="流程审批历史" :visible.sync="dialogVisible" width="50%">
            <workflow-history :instance-id="instanceId"></workflow-history>
        </el-dialog>
    </div>
</template>

<script>
    import WorkflowHistory from "../workflow/WorkflowHistory"
    import WorkflowInstanceImg from "../workflow/WorkflowInstanceImg"

    export default {
        name: "MyDone",
        data() {
            return {
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                loading: false,
                formQuery: {
                    instanceName: null,
                    currUserName: null
                },
                instanceId: "",
                dialogVisible: false,
                imgDialogVisible: false,
                flowImgUrl: null,
            }
        },
        components: {
            WorkflowHistory,
            WorkflowInstanceImg
        },
        methods: {
            //查看流程图
            handleViewFlowImg(param) {
                this.imgDialogVisible = !!param;
                this.flowImgUrl = `${this.$flowUrlHttp}api/rest/instance/img/${param}`;
            },
            formatterDate(row, column, cellValue, index) {
                return this.$formatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss');
            },
            handleClick(row) {
                this.dialogVisible = true;
                this.instanceId = row.id;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.onSubmit(null, val);
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.onSubmit(val, this.pageSize);
            },
            //查询方法
            onSubmit(pageNum, pageSize) {
                this.formQuery.pageNum = pageNum ? pageNum : 1;
                this.formQuery.pageSize = pageSize ? pageSize : this.pageSize;
                this.initTableData(this.formQuery);
            },
            onReset() {
                this.formQuery = {
                    instanceName: null,
                    currUserName: null
                };
            },
            handleDelete(row) {
                this.$httpDelete(this.$axiosFlowHttp, "api/rest/model/del/" + row.id, {}).then(res => {
                    if (res.code === 200) {
                        this.$successMsg("删除成功");
                    } else {
                        this.$errorMsg("删除失败");
                    }
                    this.onSubmit(null, null);
                });
            },
            //子组件方法回调
            callBackFromSub(param) {
                this.dialogVisible = param;
                this.onSubmit(null, null);
            },
            //初始化表格数据
            initTableData(param) {
                this.loading = true;
                this.$httpGet(this.$axiosFlowHttp, `api/rest/instance/${this.$getCurrUserId('currLoginUser')}/done/list/page`, param)
                    .then(res => {
                        if (res.code === 200) {
                            this.total = res.data.total;
                            this.tableData = res.data.result;
                        }
                        this.loading = false;
                    });
            }
        },
        mounted() {
            this.onSubmit(null, null);
        }
    }
</script>

<style scoped lang="scss">
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .clearfix > span {
        display: inline-block;
        height: 30px;
        line-height: 15px;
    }

    .el-icon-condition, .el-icon-table-list {
        font-size: 20px;
        margin: 3px 3px 3px 3px;
    }

    .table-list {
        margin-top: 10px;
        /*height: calc(100vh);*/
    }

    .el-card {
        /deep/ .el-card__header {
            padding: 10px 15px;
        }
    }

    .avatar {
        width: 35px;
        height: 35px;
        border-radius: 35px;
    }

    .el-table .cell {
        height: 23px;

        .el-button {
            padding: 0 0;
        }
    }
</style>
